<template>
  <div v-if="hasRouteAuth('auth:system:income')">
    <div class="income-wrap">
      <Title title="收入项配置" style="font-size:16px;" class="main-title"/>
      <!-- 需添加权限 -->
      <template v-if="hasRouteAuth('system:income:add')">
        <el-button v-if="!showMobilePage" type="primary" plain size="small" style="background:#fff;color:#406EFF;width:120px;padding:7px 0px;" @click="addIncomeItem">添加收入项</el-button>
        <div v-else class="mobile-link-btn mobile-btn-left" @click="addIncomeItem">添加通知</div>
      </template>
    </div>
    <IncomeListDialog ref="incomeListDialog" />
    <CreateIncomeDialog ref="createIncomeDialog" @update="update"/>
  </div>
</template>
<script>
// api
import { hasRouteAuth } from '@/utils/permission';
import IncomeListDialog from './module/incomeListDialog';
import CreateIncomeDialog from './module/createIncomeDialog';
import { mapState } from 'vuex';
import Title from '@/components/Title';

export default {
  name: 'IncomeKindConfig',
  components: { IncomeListDialog, CreateIncomeDialog, Title },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    addIncomeItem() {
      this.$refs['createIncomeDialog'].dialogVisible = true;
    },
    update(isAdd = true) {
      this.$refs.incomeListDialog.getList(isAdd);
    }
  }
};
</script>
<style lang="scss" scoped>
.income-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  .main-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #141C3D;
    margin-right: 47px;
  }
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
